<template>
  <div>
    <h1>reactive函数用法</h1>
    <hr />
    <ul>
      <!-- <li>{{ obj.name }}</li>
      <li>{{ obj.age }}</li>
      <li>{{ obj.count }}</li> -->
      <li>
        {{name}}
      </li>
      <li>
        {{age}}
      </li>

      <li>
        <button @click="changeObj">修改reactive定义变量</button>
      </li>
      <li>{{ list }}</li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
/**
 * 作用：reactive是一个函数，接收一个普通的对象传入，把`对象数据`转化为响应式对象并返回
 * **使用步骤**
 * 语法：const 变量名 = reactive(对象变量的默认值)
1. 从vue框架中导入`reactive`函数
2. 在setup函数中调用reactive函数并将对象数据传入
3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
 */
import { reactive, toRefs } from 'vue'
export default {
  data () {
    return {
      msg: { age: 19 }
    }
  },
  setup () {
    // 定义变量（作用和vue2的data一样）
    // 说明：定义了一个叫obj变量
    const obj = reactive({
      name: '小红',
      age: 18
    })

    const list = reactive({
      list: [1, 2, 3]
    })

    //  不可以的
    // const num = reactive(0)

    // 说明：定义一个方法
    const changeObj = () => {
      // 修改obj变量
      // 1. 可以局部修改某个属性
      obj.age = Math.random() * 100
      // 2. 整个变量=号重新赋值=》不可以
      // obj = { count: 0 }
      // 可以的
      // obj.count = 0
    }

    return { obj, changeObj, list, ...toRefs(obj) }
  }
}
</script>

<style lang="scss" scoped>
</style>
